<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>投诉举报</title>
		<script src="../js/header.js"></script>
	    <style type="text/css">
	        #app{
	            padding: 25px;
	            margin: 0px;
	            min-height: 700px;
	            /*box-shadow: 0px 2px 4px 0 rgba(200,200,200,0.50);*/
	        }
	        .titlename{
	        	font-family: PingFangSC-Medium;
				font-size: 16px;
				color: #323232;
				letter-spacing: 0;
	        }
	        .complaint-title{
	        	font-family: PingFangSC-Semibold;
				font-size: 20px;
				color: #3991D0;
				letter-spacing: 0;
	        }
	        .phone-wrap{
				padding: 1% 4% 4% 4%;
	        	margin: 0 auto;
	        	width: 80%;
	        	background: #FFFFFF;
				border: 1px solid #C0CCDA;
				box-shadow: 0 2px 4px 0 rgba(208,208,208,0.50);
				border-radius: 4px;
	        }
	        .phone-wrap span{
	        	font-family: PingFangSC-Medium;
				font-size: 16px;
				color: #323232;
				letter-spacing: 0;
	        }
	        
	        #app .el-table td,
	        #app .el-table th.is-leaf{
	        	border: 0;
	        }
	        #app .el-table td{
	        	padding-left: 5px;
	        }
	        
	        #app .el-table--border::after,
	        #app .el-table--group::after,
	        #app .el-table::before{
	        	background-color: #fff;
	        }
	        /* 修改hover效果 */
	        #app .el-table--enable-row-hover .el-table__body tr:hover>td{
	       		background-color: #fff;
	       	}
	    </style>
	</head>
	<body>
		<div v-cloak id="app">
			<div style="margin-top: 10px;">
				<el-row>
					<el-col>
						<div style="padding-left: 9px;border-left: 4px solid #0D9AFF;">
							<span class="titlename">投诉举报</span>
						</div>
					</el-col>
					<el-col>
						<div style="margin: 77px auto 64px;text-align: center;">
							<span class="complaint-title">投诉处理单位请优先选择省级地震单位电话进行咨询和投诉</span>
						</div>
					</el-col>
					<el-col>
						<div class="phone-wrap">
							<el-table
							    :data="phoneList">
							     <el-table-column
							     	align="left">
							      	<template slot-scope="scope">
							      		<span>{{ scope.row.phone1.department }}</span>：
							      		<span>{{ scope.row.phone1.phonenum }}</span>
							      	</template>
							    </el-table-column>
							    <el-table-column
							    	align="left">
							      	<template slot-scope="scope">
							      		<span>{{ scope.row.phone2.department }}</span>：
							      		<span>{{ scope.row.phone2.phonenum }}</span>
							      	</template>
							    </el-table-column>
							    <el-table-column
							    	align="left">
							      	<template slot-scope="scope">
							      		<span>{{ scope.row.phone3.department }}</span>：
							      		<span>{{ scope.row.phone3.phonenum }}</span>
							      	</template>
							    </el-table-column>
							    <el-table-column
							    	align="left">
							      	<template slot-scope="scope">
							      		<span>{{ scope.row.phone4.department }}</span>：
							      		<span>{{ scope.row.phone4.phonenum }}</span>
							      	</template>
							    </el-table-column>
							</el-table>
						</div>	
					</el-col>
				</el-row>
		 	</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
        	el: '#app',
        	data(){
        		return{
        			phoneList: [
        				{
        					phone1:{
	        					department: '北京局',
	        					phonenum: '1234567890'
        					},
        					phone2: {
	        					department: '河北局',
	        					phonenum: '1234567890'
    						},
        					phone3: {
	        					department: '河南局',
	        					phonenum: '1234567890'
        					},
        					phone4: {
	        					department: '山东局',
	        					phonenum: '1234567890'
        					}
        				},
        				{
        					phone1:{
	        					department: '黑龙江局',
	        					phonenum: '1234567890'
        					},
        					phone2: {
	        					department: '河北局',
	        					phonenum: '1234567890'
        					},
        					phone3: {
	        					department: '河南局',
	        					phonenum: '1234567890'
        					},
        					phone4: {
	        					department: '山东局',
	        					phonenum: '1234567890'
        					}
        				},
        				{
        					phone1:{
	        					department: '北京局',
	        					phonenum: '1234567890'
        					},
        					phone2: {
	        					department: '内蒙古局',
	        					phonenum: '1234567890'
        					},
        					phone3: {
	        					department: '黑龙江局',
	        					phonenum: '1234567890'
        					},
        					phone4: {
	        					department: '山东局',
	        					phonenum: '1234567890'
        					}
        				},
        				{
        					phone1:{
	        					department: '北京局',
	        					phonenum: '1234567890'
        					},
        					phone2: {
	        					department: '河北局',
	        					phonenum: '1234567890'
        					},
        					phone3: {
	        					department: '河南局',
	        					phonenum: '1234567890'
        					},
        					phone4: {
	        					department: '山东局',
	        					phonenum: '1234567890'
        					}
        				}
        			]
        		}
        	}
		})
	</script>
</html>
